<template>
  <div class="bac-bottom">
    <div class="bac-bottom-title">成功案例</div>
    <div class="swiper-container" circular="true">
      <div class="swiper-wrapper" circular="true">
        <div
          v-for="item in casesList"
          :key="item.ID"
          class="swiper-slide"
          @click="routerpush()"
        >
          <img :src=" upload + item.Imgs" />
        </div>
        <!-- <div
          v-for="item in casesList"
          :key="item.id"
          class="swiper-slide"
        >
          <img :src=" upload + item.Imgs" />
        </div> -->
      </div>
      <!-- <div class="swiper-pagination"></div> -->
      <!-- <div class="swiper-button-next"></div> -->
      <!-- <div class="swiper-button-prev"></div> -->
    </div>
  </div>
</template>

<script>
import router from '@/router/index'
import { getAppGetFWLBListApi, getAppGetXMALListApi } from '@/api/resService'
import { Carousel } from 'ant-design-vue'
import Swiper from 'swiper' // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入

export default {
  name: 'buttom',
  components: {
    Carousel,
  },
  data() {
    return {
      productionList: [],
      lifeList: [],
      policyList: [],
      casesList: [],
      casesListceshi: [],
      timer: null,
      columntransform: 0,
      columnItem: { transform: `translateX(columntransform)` },
      upload: process.env.VUE_APP_API_BASE_URL,
    }
  },
  methods: {
    routerpush(id){
      this.$router.push({ path: '/reception/cases/detail' });
    },
    getSwiper() {
      this.swiper = new Swiper('.swiper-container', {
        loop: true, // 无缝
        autoplay: {
          //自动开始
          delay: 3000, //时间间隔
          disableOnInteraction: false, //*手动操作轮播图后不会暂停*
        },
        paginationClickable: true,
        slidesPerView: 4, // 一组四个
        spaceBetween: 10, // 间隔
        // 如果需要前进后退按钮
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
        // 如果需要分页器
        // pagination: {
        //   el: '.swiper-pagination',
        //   clickable: true, // 分页器可以点击
        // },
      })
    },
    itemtrans() {
      // if (this.columntransform <= -1000) {
      //   // return false
      // this.columntransform = 0
      // }
      this.columntransform -= 200
      this.columnItem.transform = 'translateX(' + this.columntransform + 'px)'
      console.log('11111')
      // this.casesList.forEach(item => {
      //   this.casesList.push(item);
      // });
      // this.casesList.splice(0,1)
      // console.log('11111',this.casesList);
    },
    getAppGetFWLBList1() {
      getAppGetFWLBListApi({
        pageSize: 10,
        pageIndex: 1,
        RMTJ: 'ALL',
        Fid: 1,
      })
        .then((res) => {
          console.log('res', res)
          this.lifeList = res.data
        })
        .catch((err) => {})
        .finally(() => {})
    },
    getAppGetFWLBList8() {
      getAppGetFWLBListApi({
        pageSize: 10,
        pageIndex: 1,
        RMTJ: 'ALL',
        Fid: 8,
      })
        .then((res) => {
          console.log('res', res)
          this.productionList = res.data
        })
        .catch((err) => {})
        .finally(() => {})
    },
    getAppGetFWLBList9() {
      getAppGetFWLBListApi({
        pageSize: 10,
        pageIndex: 1,
        RMTJ: 'ALL',
        Fid: 9,
      })
        .then((res) => {
          console.log('res', res)
          this.policyList = res.data
        })
        .catch((err) => {})
        .finally(() => {})
    },
    getAppGetXMALList() {
      getAppGetXMALListApi({
        pageSize: 10,
        pageIndex: 1,
        RMTJ: 1,
      })
        .then((res) => {
          console.log('res', res)
          this.casesList = res.data
          this.$nextTick(()=>{
            this.getSwiper()
          })
        })
        .catch((err) => {})
        .finally(() => {})
    },
  },
  mounted() {
    // this.getAppGetFWLBList1()
    // this.getAppGetFWLBList8()
    // this.getAppGetFWLBList9()
    this.getAppGetXMALList()
    // this.getSwiper()
    // this.timer = setInterval(()=>{
    //   this.itemtrans()
    // },1000)
  },
}
</script>

<style lang="less" scoped>
.swiper-container {
  width: 1600px;
  margin: 30px auto;
  margin-top: 0;
}
.swiper-slide{
  img{
    display: block;
    margin: 0 auto;
  }
}
.bac-bottom {
  position: relative;
  height: 220px;
  margin-bottom: 40px;
  border: 2px solid #cac8c8;
  width: 98%;
  margin: 0 auto;
  border-bottom: none;
  img {
    height: 160px;
    width: 300px;
    cursor: pointer;
  }
  .bac-bottom-title{
    width: 1600px;
    margin: 10px auto;
    font-size: 24px;
    text-align: center;
  }
  .cases-items {
    // transition: all 0.5;
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .cases-item {
    transition: all 10s;
    margin: 0 2%;
    cursor: pointer;
  }
  .service-class {
    display: flex;
    margin: 0 auto;
    .service-class-item {
      border: solid 1px #464848;
      padding: 10px 20px;
      margin-right: 10px;
      border-top: none;
      cursor: pointer;
    }
  }
}
</style>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  /* height: 400px; */
  line-height: 160px;
  background: #fff;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>
